<!DOCTYPE HTML>
<html>
    <head>
        <title>liveplayer</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
        <script type="text/javascript" src="liveplayer-element.min.js"></script>
   		<style> 
			.div-a{ float:left;width:49%;border:1px solid #000;text-align:center} 
			  
			.div-a div{ margin:0 auto;} 
			.div-b div{ margin:0 auto;}
			.div-c div{ margin:0 auto;}
			.div-d div{ margin:0 auto;}
			 
			 
		</style> 
    </head>
    <body >
    	<div>
	    	<div class="div-a"> 
	    		<h1>东方卫视</h1>
	        	<live-player id="player01" video-url="rtmp://192.168.0.182/oflaDemo/dongfang" live="true" stretch="true"></live-player>
	        </div>
	        <div class="div-a">
	        	<h1>东方湖南</h1>
	        	<live-player video-url="rtmp://192.168.0.182/oflaDemo/hunan" live="false" stretch="true"></live-player>
	        </div>
	        <div class="div-a">
	        	<h1>东方广西</h1>
	        	<live-player video-url="rtmp://192.168.0.182/oflaDemo/guangxi" live="true" stretch="true"></live-player>
			</div>
			<div class="div-a">
				<h1>东方广东</h1>
				<live-player video-url="rtmp://192.168.0.182/oflaDemo/guangdong" live="true" stretch="true"></live-player>
	 		</div>
    	</div>
    	
        <script>
            // JavaScript 交互示例
            var player = document.getElementById('player01');
            player.addEventListener('snapOutside', evt => {
                // 获取快照 base64 数据
                console.log('snap base64 data', evt.detail[0]);
            });
            setTimeout(() => {
                player.getVueInstance().snap();
                player.getVueInstance().pause();
            }, 5000);
            setTimeout(() => {
                player.getVueInstance().play();
            }, 8000);
        </script>
    </body>
</html>